import {FC,useState,useEffect} from 'react'
import './Dashboard.scss'
import {Descriptions,Card,Button} from 'antd'
import {IReportData} from '@/types/api.ts'
import api from '@/api/index.ts'
import { useStore } from '@/store/index.ts';
import {formateState} from '@/utils/index.ts'
import {useCharts} from "@/hooks/useCharts.ts";
const Dashboard: FC = () => {
  const userInfo = useStore((state) => state.userInfo);
  useEffect(() => {
    getReportData();
  }, []);
  const [report, setReport] = useState<IReportData>();
  // 获取数据统计
  const getReportData = async () => {
    const data = await api.getReportData();
    setReport(data);
  };
  //获取折线图
  const getLineChart = async () => {
    const data = await api.getLineData();
    if (lineChart) {
      lineChart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['收入', '支出'],
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 20,
        },
        xAxis: {
          data: data.label,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '订单',
            data: data.order,
            type: 'line',
          },
          {
            name: '流水',
            data: data.money,
            type: 'line',
          },
        ],
      });
    }

  }
  // 获取饼图1
  const getPieChart1 = async () => {
    const data = await api.getPieCityData();
    if (pieChart1) {
      pieChart1?.setOption({
        title: {
          text: '前端top分布',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '城市分布',
            type: 'pie',
            radius: '50%',
            data,
          },
        ],
      });
    }

  }
  // 获取饼图2
  const getPieChart2 = async () => {
    const data = await api.getPieAgeData();
    pieChart2?.setOption({
      title: {
        text: '后端top分布',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          radius: [50, 180],
          roseType: 'area',
          data,
        },
      ],
    })
  }
  // 获取雷达图
  const getRadarData = async () => {
    const data = await api.getRadarData();
    radarEchart?.setOption({
      legend: {
        data: ['程序员技术分析模型'],
      },
      radar: {
        indicator: data.indicator,
      },
      series: [
        {
          name: '模型诊断',
          type: 'radar',
          data: data.data,
        },
      ],
    })
  }
  const renderLineChart = () => {
    getLineChart();
  };
  const renderPieChart = () => {
    getPieChart1();
    getPieChart2();
  };
  const renderRadarChart = () => {
    renderLineChart();
  };
  const [lineRef, lineChart] = useCharts();
  const [pieRef1, pieChart1] = useCharts();
  const [pieRef2, pieChart2] = useCharts();
  const [radarRef, radarEchart] = useCharts();
  useEffect(() => {
    renderLineChart();
    getPieChart1();
    getPieChart2();
    getRadarData();
  }, [lineChart, pieChart1, pieChart2, radarEchart]);
  return (
      <div className={'Dashboard'}>
        <div className={'userInfo'}>
          <img src={userInfo.userImg} className={'userImg'}/>
          <Descriptions title="用户信息">
            <Descriptions.Item label="用户ID">{userInfo.userId}</Descriptions.Item>
            <Descriptions.Item label="邮箱">{userInfo.userEmail}</Descriptions.Item>
            <Descriptions.Item label="状态">{formateState(userInfo.state)}</Descriptions.Item>
            <Descriptions.Item label="手机号">{userInfo.mobile}</Descriptions.Item>
            <Descriptions.Item label="岗位">{userInfo.job}</Descriptions.Item>
            <Descriptions.Item label="部门">{userInfo.deptName}</Descriptions.Item>
          </Descriptions>
        </div>
        <div className={'report'}>
          <div className={'card'}>
            <div className={'title'}>提交代码行数</div>
            <div className={'content1'}>{report?.codeLine}行</div>
          </div>
          <div className={'card'}>
            <div className={'title'}>工资</div>
            <div className={'content1'}>{report?.salary}元</div>
          </div>
          <div className={'card'}>
            <div className={'title'}>完成需求</div>
            <div className={'content1'}>{report?.icafeCount}卡片</div>
          </div>
          <div className={'card'}>
            <div className={'title'}>项目数量</div>
            <div className={'content1'}>{report?.projectNum}个</div>
          </div>
        </div>
        <div className={'chart'}>
          <Card title="消费流水" extra={<Button type='primary' onClick={renderLineChart}>刷新</Button>}>
              <div ref={lineRef} className={'lineChart'}></div>
          </Card>
          <Card title="程序员top6" extra={<Button type='primary' onClick={renderPieChart}>刷新</Button>}>
              <div  className={'pieChart'}>
                <div ref={pieRef1} className={'pieItem'}></div>
                <div ref={pieRef2} className={'pieItem'}></div>
              </div>
          </Card>
          <Card title="技能雷达图" extra={<Button type='primary' onClick={renderRadarChart}>刷新</Button>}>
              <div ref={radarRef} className={'radarChart'}></div>
          </Card>
        </div>
      </div>
  )
}
export default Dashboard
